// pagenum	是number	int	页码值
// pagesize	是	int	每页显示多少条数据
// cate_id	否	string	文章分类的 Id
// state	否	string	文章的状态，可选值有：已发布、草稿
const { laypage } = layui

let total = 0  // 文章列表的初始值
// 当前获取文章列表接口的对象=>
// 包含 pagenum pagesize cate_id state 

// total 数据 10 条  => 每页的4条
// 1页   4条
// 2页   4条
// 3页   2条

// total 5条   2条
// 1 页  2条
// 2 页  2条
// 3 页  1条
// 分页 总共的条数/ 每页显示的个数 = > 一共有多少页

const q = {
  pagenum: 1, // 根据当前的页码来判断
  pagesize: 2,
  cate_id: '',  // 分类
  state: ''     // 发布状态
}
// 获取文章的列表
// 函数声明
const load = () => {
  getArticleList(q, res => {
    // console.log(res);
    let arr = res.data.data
    total = res.data.total
    // 获取数据-=>遍历 =>创建标签=>添加对应容器
    $(".layui-table tbody").empty();
    // obj.pub_date
    // moment => DD 补0 ,D不补0
    arr.forEach(obj => {
      let theTr = `<tr>
                        <td>${obj.title}</td>
                        <td>${obj.cate_name}</td>
                        <td>${moment(obj.pub_date).format('YYYY-M-DD hh:mm:ss')}</td>
                        <td>${obj.state}</td>
                        <th>
                        <a href="/iframe/article/publisher/publisher.html?id=${obj.Id}" class="layui-btn layui-btn-xs">编辑</a>
                        <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
                            </th>
                    </tr>`;
      $(".layui-table tbody").append(theTr);

    })

    setPage() // 分页处理
  })
}
load()


// 筛选 => 
$(".search").on("submit", e => {
  e.preventDefault();
  // 把下拉菜单的值, 放到参数q对象里, 再让load执行一次, 把参数对象q发给后台, 获取新的数据, load铺设页面
  q.cate_id = $("select[name=category]").val();
  q.state = $("select[name=state]").val();
  load();
})

// 6. 删除按钮 - 事件委托 - 点击事件
$(".layui-table tbody").on("click", ".del", function(){ // this: 事件源删除按钮
  // id拔下来  $(this).attr("myid");
  // 调用删除接口通知后台把这条数据删除
  let myId = $(this).attr("myid")
  getArticleDeleteById(myId, res => { // 这个回调函数能进来证明完全成功(响应拦截器里有判断)
      load();
  })
})



const setPage = () => {
  laypage.render({
    elem: 'page' // 容器的类名
    , count: total  // 从服务端取的所有的数据的个数 
    , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
    , limit: q.pagesize  //限制每页的个数
    , limits: [2, 3, 5, 10]
    // ===TODO Warning==
    // 重新跳页的时候, 需要将laypage curr 当前的页码需要重新的去更新= > q.pagenum
    , curr:  q.pagenum
    , jump: function (obj, first) { // 切换页数的回调  
      // first  判断首次的执行
      // console.log(obj)
      // 判断不是首次执行触发的事件
      if (!first) {
        // 将当前的页数传过去
        // 获取当前的页数 和limit =>每页展示的条数
        // 只需要更改q的数据 => 传给 接口
        // 点击的时候=>修改当前的页数

        // curr代表当前的页数 
        q.pagenum = obj.curr 
        q.pagesize = obj.limit

        // 重新跳页的时候, 需要将laypage curr 当前的页码需要重新的去更新= > q.pagenum

        // 重新渲染数据
        load() // 返回的就是点击的页数对应的数据
        // console.log('不是首次执行', obj);
      }
    }
  });
}


// 获取文章的分类列表
getArticleCates(res => {
  // console.log(res);
  // 获取的数据
  let arr = res.data.data;
  // 将数据=>生成标签=> 添加到页面上

  $("select[name=category]").append(`<option value="" lay-verify="cate">所有分类</option>`); // 默认选项- 默认获取所有分类

  arr.forEach(obj => {
    var theOption = `<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`;
    $("select[name=category]").append(theOption);
  })
  // 经典框架 =>动态渲染的=> 收到的调用render()方法=>视图的更新
  // 让layui刷新一下form表单
  layui.form.render('select', 'category');
})

// 后台返回的数据 => 
let date = new Date()
date.getFullYear()
// getMonth()  0 从0开始
// 2021  6  30 7 46  
// 6  = > 06  10 

